<template>
    <div class="layout">
        <header>
            <div class="left_container">A</div>
            <div class="map_container">60</div>
            <div class="right_container">B</div>
        </header>
        <main></main>
        <footer>
            <section class="survivor">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </section>
            <section class="map"></section>
            <section class="hunter"></section>
        </footer>
    </div>
</template>

<script setup lang='ts'>
</script>
<style scoped lang='scss'>
.layout {
    background: #fff;
    width: 80%;
    display: grid;
    grid-auto-rows: 30px 100px 50px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    border-radius: 4px;
    overflow: hidden;
    transition:0.37s all;
    &:hover{
        transform: scale(1.1);
        box-shadow: 2px 4px 8px rgba(0, 0, 0, .37)
    }
    main {
        background: $screen-color;
    }

    header {
        display: grid;
        grid-template-columns: 40% 20% 40%;

        .left_container {
            background: #cba448;
            display: flex;
            align-items: center;
            padding-left: 1em;
            font-size: 0.9em;
            color: #fff;
        }

        .map_container {
            background: #666;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-weight: bold;
            font-size: 1.5em;
        }

        .right_container {
            background: #a44435;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            padding-right: 1em;
            font-size: 0.9em;
            color: #fff;
        }
    }

    footer {
        display: grid;
        grid-template-columns: 40% 20% 40%;

        .survivor {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            background: #333;

            &>div {
                border-right: 1px solid #fff;
            }
        }

        .map {
            background: #666;
        }

        .hunter {
            background: #333;
        }
    }
}
</style>